<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-24
    	描述：后台系统首页
    -->
  <div class="home-container">
    <div class="rr-view-ctx">
      <div class="el-card is-never-shadow rr-view-ctx-card">
        <div class="el-card__body">
          <div class="mod_home">
            <div class="menu-container">
              <div class="menu-body">
                <div class="menu-body-center">
                  <div v-for="(item, index) in 40" :key="index" class="body-item">
                    <div style="cursor: pointer;">
                      <div v-if="menuList[index]" @click="pathTo(menuList[index])">{{ menuList[index].name }}</div>
                      <div v-else></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from "@/store";
import UserApi from "@/api/user.js";
import SettingApi from "@/api/setting.js";
import router from "../../router";
const { userInfo } = useUserStore();
export default {
  data() {
    return {
      userInfo,
      menuList: [],
    };
  },
  created() {
    /*获取数据*/
    this.getMenuList();
  },
  methods: {
    /*获取数据*/
    getMenuList() {
      SettingApi.getMenuList({
        id: this.$route.query.id ? this.$route.query.id : 1
      })
        .then((data) => {
          this.loading = false;
          this.menuList = data.data;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    pathTo(item) {
      if (item != null) {
        let path = item.path;
        router.push(path);
      } else {
        router.push("/Home");
      }
    },
  },
};
</script>

<style lang="scss">
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-content: center;
  flex-direction: column;
  // background: url(/static/imgs/home_bg.jpg) center center no-repeat;
}
.home-container .home-title {
  padding: 20px;
  text-align: center;
  white-space: nowrap;
  text-align: center;
  font-size: 40px;
  color: #409eff;
}
.home-container .home-des {
  color: #888888;
}

.home-index {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-width: 1000px;
  overflow-x: auto;
}

.rr-view-ctx {
  width: 100%;
    flex: 1;
}

.rr-view-ctx-card {
    border-width: 0 !important;
}

.el-card {
    border-radius: var(--el-card-border-radius);
    border: 1px solid var(--el-card-border-color);
    background-color: var(--el-card-bg-color);
    overflow: hidden;
    color: var(--el-text-color-primary);
    transition: var(--el-transition-duration);
}

.el-card__body {
    padding: var(--el-card-padding);
}

.menu-container {
    width: 100%;
    position: relative;
}

.menu-body {
    width: 70%;
    position: relative;
    margin: 20px auto 0;
}

.menu-body-center {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    justify-items: center;
}

.body-item {
    width: 100%;
    text-align: center;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    border: 2px solid #c0ddff;
    border-radius: 10px;
    font-size: 16px;
}

.right-content-box {

}
</style>
